<template>
	<div class="search" id="">
		搜索
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="文章搜索" name="first">
				文章搜索
				{{str}}
				<el-input maxlength="30" placeholder="请输入内容" v-model="input" show-word-limit clearable>
					 <el-button slot="append" icon="el-icon-search" @click="cearchText()">搜索</el-button>
				</el-input>
				搜索结果：{{result}} </br>
				搜索关键字数组：{{sss}}
			</el-tab-pane>
			<el-tab-pane label="用户搜索" name="second">文章搜索</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		name: 'search',
		components: {},
		data() {
			return {
				activeName: 'first',
				input: '',
				result: [],
				str: '徐娜xuanchengwush数据uc是hulichang',
				sss: ''
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			cearchText(){
				let flag = true;
				console.log('stat')
				var arr1 = []
				this.sss = this.input.split("") // 搜索关键字转数组
				console.log(this.input.split(""))
				var index = this.sss.length
				while(flag){
					index--
					console.log('打印了'+index)
					if(index === 0){
						flag = false
					}
				}
				// for(var i=0,arr = this.input.split(""); i > arr.length; i++){
				// 	console.log('没有找到与关键字相关的信息')
				// 	if(this.str.indexOf(arr[i]) < 0){
				// 		console.log('没有找到与关键字相关的信息')
				// 	}else{
				// 		this.result.push(this.str.indexOf(arr[i]))
				// 		console.log(this.str.indexOf(arr[i]))
				// 	}
				// }
				// return flag
				// 模糊匹配
				// function fuzzyMatch(str, key){
				//     let index = -1, flag = false;
				//     for(var i = 0, arr = key.split(""); i < arr.length; i++ ){
				//         //有一个关键字都没匹配到，则没有匹配到数据
				//         if(str.indexOf(arr[i]) < 0){
				//             break;
				//         }else{
				//             let match = str.matchAll(arr[i]);
				//             let next = match.next();
				//             while (!next.done){
				//                 if(next.value.index > index){
				//                     index = next.value.index;
				//                     if(i === arr.length - 1){
				//                         flag = true
				//                     }
				//                     break;
				//                 }
				//                 next = match.next();
				//             }
				
				//         }
				//     }
				//     return flag
				// }
			}
		},
		beforeCreate: function() {
			console.log('1-beforeCreate 初始化之后')
		},
		created: function() {
			
			console.log('2-created 创建完成')
		},
		beforeMount: function() {
			console.log('3-beforeMount 挂载之前')
		},
		mounted: function() {
			console.log('4-mounted 被创建')
		},
		beforeUpdate: function() {
			console.log('5-beforeUpdate 数据更新前')
		},
		updated: function() {
			console.log('6-updated 被更新后')
		},
		activated: function() {
			console.log('7-activated 激活的')
		},
		deactivated: function() {
			console.log('8-deactivated 暂停')
		},
		beforeDestroy: function() {
			console.log('9-beforeDestroy 销毁之前')
		},
		destroyed: function() {
			console.log('10-destroyed 销毁之后')
		}
	}
</script>

<style scoped>
</style>
